import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// 引入postcss-px-to-viewport
// 在移动端开发中，‌使用px单位可能会导致在不同屏幕尺寸下显示效果不一致，‌或者在高分辨率屏幕上元素过大或过小。‌
// 此外，‌使用rem单位存在兼容性问题。‌
// postcss-px-to-viewport通过将px单位转换为视口单位，‌提供了一种更加智能和灵活的解决方案来适配不同的屏幕尺寸。‌
import postcssPxToViewport from 'postcss-px-to-viewport';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',//解决vite use--host to expose
    port:8080,
    open:true
  },
  env: {
    VITE_API_BASE_URL: '/api', // 根据实际API地址配置
  },
  resolve:{
    alias:[
      {
        find:'@',
        replacement:resolve(__dirname,'src')
      }
    ]
  },
  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          unitToConvert: 'px', // 要转换的单位
          viewportWidth: 375, // 设计稿宽度
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 指定转换那些属性，*表示全部
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: [], // 要忽略的选择器
          minPixelValue: 1, // 最小的转换数值
          mediaQuery: false, // 是否在媒体查询中也转换px
          replace: true, // 是否直接更换原来的单位
          exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或者某些特定文件
        }),
      ],
    },
  },
})
